<template>
   <div class="Back">
        <div class="backImage flex">
           <img :src="require('@/assets/state/'+getImage)" v-if="getImage" class="backImage">
           <p class="name">{{ErrorData.message || '未定义'}}</p>
           <div class="fun flex">
              <el-button icon="el-icon-back" class="button" @click="back">返回上一步</el-button>
              <el-button icon="el-icon-house" class="button" @click="home">回到主页</el-button>
           </div>
        </div>

   </div>
</template>
<script>
import {mapState} from 'vuex'
import commonData from '@/common/data'
  export default 
  {
     name :'', 
  
     methods:{
      back(){
         this.$router.go(-1)
      },
      home(){
         this.$router.replace('/home')
      }
     },
     computed:{
        ...mapState('Error',['ErrorData']),
        getImage(){
          let res = commonData.errorImageList.find(item => item.code == this.ErrorData?.code)
          if(res)  return res.src
          else return null
        }
     },
  }
</script>
<style scoped lang='less'>
.Back{
   background: var(--BackColor);
   margin-top: 0;
   color: var(--fontColor);
}
.backImage{
   width: 90vw;
   max-width: 800px;
   height: 80vh;
   min-height: 300px;
   object-fit: cover;

   img{
      width: 100%;
      height: 500px;
      max-height: 60vh;
   }

   .name{
      margin-top: 20px;
      width: 100%;
      text-align: center;
      font-size: 20px;
   }
}
.fun{
   margin-top: 20px;
   width: 100%;
}
// .button{
//    background: var(--GeneralBackColor);
//    color: var(--fontColor);
// }
</style>